iT邦幫忙

2021 iThome 鐵人賽

DAY 0
0
自我挑戰組

從零開始學習 JS 的連續-30 Days-系列 第 13

[Day 13]從零開始學習 JS 的連續-30 Days---Event 事件

  • 分享至 

  • xImage
  •  

Event 事件是什麼?

  1. Event 介面表示一個在 DOM 物件上所發生的事件。
  2. 一個事件可以是由使用者的操作行為所產生(例如:按按鍵、點滑鼠。)

addeventListener - 註冊事件監聽


1.btn(DOM物件)+( . )+addEventListener( "操作行為" , function(){ 執行的行為 })
2.如上圖所示在DOM物件上新增一個事件。
3.小括號裡面,第一個是操作行為,第二個是執行的函式。

數字累計方式


如上圖所示綜合應用前幾篇所寫的功能可以產生一個數字累加且反映出的方式。

function(e)裡面的e是什麼?

  1. e就是參數也是event的縮寫。
  2. 功能是可以記錄許多的事件。


如上圖所示查詢e會發現記錄著許多的資訊。

e.target - 了解目前所在元素位置


如上圖最後一行顯示,使用e.target查詢元素的位置。

preventDefault - 取消預設觸發行為

  1. 語法:參數+preventDefault


如上圖所示原本( "a" )是連結點擊應該要執行動作,但使用了preventDefault語法後取消了原本預設的觸發行為。
再搭配textContent語法可以改變其他標籤的文字。

今天就到這邊結束了。


上一篇
[Day 12]從零開始學習 JS 的連續-30 Days---DOM是什麼?
下一篇
[Day 14]從零開始學習 JS 的連續-30 Days---forEach迴圈
系列文
從零開始學習 JS 的連續-30 Days-30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言